<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Dynamic Data Table</title>
        <link rel="stylesheet" href="bootstrap.min.css">
        <!-- <link rel="stylesheet" href="https://www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css"> -->
        <style>
            .delete-all-loading {
                display: none;
                width: 1.5rem;
                height: 1.5rem;
                vertical-align: text-bottom;
                border: .25em solid currentColor;
                border-right-color: transparent;
                border-radius: 50%;
                -webkit-animation: spinner-border .75s linear infinite;
                animation: spinner-border .75s linear infinite
            }

            .cre-all-loading {
                display: none;
                width: 1.5rem;
                height: 1.5rem;
                vertical-align: text-bottom;
                border: .25em solid currentColor;
                border-right-color: transparent;
                border-radius: 50%;
                -webkit-animation: spinner-border .75s linear infinite;
                animation: spinner-border .75s linear infinite
            }

            .nowrap {
                white-space: nowrap;
            }
        </style>
    </head>

    <body>
        <div class="container-fluid">
            <div class="row" style="margin: 10px;">
                <div class="input-group mb-3">

                    <div style="display: flex;">
                        <div class="input-group-prepend">
                            <span class="input-group-text">题ID</span>
                        </div>
                        <input type="text" id="input_region" class="form-control" aria-label="Sizing example input"
                            aria-describedby="inputGroup-sizing-default" value="" placeholder="可为空"
                            style="width: 200px;">
                        <select name="countryCode" id="country_code">
                            <option text="hk" value="hk"> 香港(HK) </option>
                            <option text="us" value="us"> 美国(US) </option>
                            <option text="de" value="de"> 德国(DE) </option>
                            <option text="fr" value="fr"> 法国(FR) </option>
                            <option text="gb" value="gb"> 英国(GB) </option>
                            <option text="ca" value="ca"> 加拿大(CA) </option>
                            <option text="nz" value="nz"> 新西兰(NZ) </option>
                            <option text="au" value="au"> 澳大利亚(AU) </option>
                        </select>
                        <div class="btn btn-primary btn-rounded" style="margin-left: 10px; margin-right: 10px;">
                            <a href=" #" class="pull-survey-btn nowrap" style="color: aliceblue;">查询</a>
                        </div>
                        <select name="huanJingZuId" id="huan_jing_zu_id" class="form-control1">
                            <option text="4831293" value="4831293"> 白白 </option>
                            <option text="4831294" value="4831294"> 志武 </option>
                        </select>
                    </div>
                </div>
                <div style="margin-left: 20px;">
                    <a href="#" class="web-pull-btn">页面拉题</a>
                    <div class="cre-all-loading" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <table class="table table-hover text-nowrap table-bordered" id="dataTable"
                    style="padding: 0px,20px,20px,20px;">
                    <thead>
                        <tr>
                            <th>
                                序号
                            </th>
                            <th>
                                题ID
                            </th>
                            <th>
                                价格
                            </th>
                            <th>
                                耗时
                            </th>
                            <!-- <th>
                                剩余
                            </th> -->
                            <th>
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>

        <script src="jquery-3.5.1.min.js"></script>
        <script src="countryMap.js"></script>
        <script src="popup.js"></script>

    </body>

</html>